import React, {useCallback} from 'react';
import {
  View,
  Text,
  StyleSheet,
  NativeModules,
  TouchableHighlight,
  Dimensions,
} from 'react-native';
import PatIcon from '../base/PatIcon';
import {useNavigation} from '@react-navigation/native';
import Colors from '../../utils/Colors';
import {useTranslation} from 'react-i18next';
const HEIGHT = NativeModules.StatusBarManager.HEIGHT;
const windowWidth = Dimensions.get('window').width;
const HomeTop = ({top}) => {
  const {t} = useTranslation();
  const navigation = useNavigation();
  const goSearch = useCallback(() => {
    navigation.navigate('search-root', {type: 'home'});
    // navigation.navigate('about');
  }, [navigation]);
  const w = (top / 40) * 130;
  const l = (top / 40) * 90;
  return (
    <TouchableHighlight
      activeOpacity={1}
      underlayColor={Colors.patBg}
      onPress={goSearch}
      style={[
        styles.searchBox,
        {
          top: HEIGHT + 40 - top,
          left: 10 + l,
          width: windowWidth - 20 - w,
        },
      ]}>
      <View style={styles.box}>
        <PatIcon name="search2" size={12} color={Colors.patFontGray} />
        <Text style={styles.txt}>{t('common.looking')}</Text>
      </View>
    </TouchableHighlight>
  );
};

const styles = StyleSheet.create({
  searchBox: {
    position: 'absolute',
    height: 25,
    width: windowWidth - 20,
    left: 10,
    top: HEIGHT + 40,
    zIndex: 99,
    flexDirection: 'row',
    borderRadius: 10,
    paddingLeft: 10,
    backgroundColor: Colors.patBg,
  },
  box: {
    display: 'flex',
    justifyContent: 'flex-start',
    alignItems: 'center',
    flexDirection: 'row',
  },
  txt: {
    color: Colors.patFontGray,
    marginLeft: 7,
    fontSize: 12,
  },
});

export default HomeTop;
